<template>
  <div class="home">  
          <div class="box1">
                  <div class="card">
                        <div class="name">
                                <div>余额</div>
                                <div style="font-size:1.5rem;margin-top:.5rem">￥{{ usersDetail.balance }}</div>
                         </div>
                       
                  </div> 
                  <div class="type">
                    <div @click="linkTo('record')">
                            充值记录
                         
                    </div>
                    <div  @click="linkTo('detailed')">   
                            余额明细 
                        
                    </div>
                  
                  </div>
          </div>
            <div class="box2">
                    <div v-for="(item,index) in data" :class="[czIndex===index?'on':'']" @click="czIndex=index">充值{{item.recharge_price}}元</div>
                
                  
            </div>
         
            <div  class="box3" v-if="czIndex>-1" >
                    充值{{   data[czIndex].recharge_price}} 赠送{{ data[czIndex].give_price}}
            </div>

            <div class="buts">
                <van-button  @click="sub">充值</van-button>
            </div>
  </div>
</template>
<script>
import {hideWxMenu } from '@/assets/js/tools'
import { mapState,mapActions } from "vuex";
import WeChat from '@/assets/js/wx/index'
let t;
export default {
  name: 'home',
    data() {
    return {
        czIndex:-1,
        data:[],
        openid:localStorage.getItem('openid')
    }
    },
  mounted(){
    t=this;
      if(!t.usersDetail.id){ 
        t.GetUsersDetail({openid:t.openid})  
    }
   
     hideWxMenu()
  
    t.getList()
  },
    computed: {
    ...mapState(['usersDetail']),
  },
  methods:{
     ...mapActions([
				'GetUsersDetail',
			]),
    sub(){

      if(t.czIndex<0){
        return t.$toast('请选择要充值的选项')
      }
      let d={
        openid:t.openid,
        id:t.data[t.czIndex].id
      }

      t['$API']['userPay'](d).then(res=>{
        
          if(res.code==200){
       let data=JSON.parse(res.data);

           

        WeChat._initWX().then(() => {
            
            	wx.chooseWXPay({
                timestamp:data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: data.paySign, // 支付签名
                success: function (res) {

                   
                     

                         t.$toast('支付成功')
                          setTimeout((t) => {
                              
                                    window.location.reload()
                              
                          }, 500,t);
                  
                }
              })
        })
    
          }
        })
    },
    getList(){
        t['$API']['userRecharge']({}).then(res=>{
          console.log(res)
          if(res.code==200){
             t.data=res.data
          }
        })
    },
    linkTo(url){
          this.$router.push({name:url})  
    },
  },
}
</script>
<style scoped lang="less">
.home{
  height: 100vh;
    background: #ededed;
} 
.box1{
          background: white;
        padding: 1rem 0;
         

      // background: red;
      // border: 1px solid black;
      // box-shadow: 0 0 1px black;

         >.card{
           margin:0 1rem 1rem;
         
           border-top-left-radius: .5rem;
           border-top-right-radius: .5rem;
           box-sizing: border-box;
            background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
          padding: 1rem;
          height:6rem;
          position: relative;
        
         
         
            >.name{
              padding-left: 1rem;
              flex: 1;
              >div{
                color: white;
                line-height: 1.5rem;
              }
            }
       
      
        }

        .type{
          display: flex;
          align-items: center;

          flex-wrap: wrap;
          >div{
            width: 49.5%;
            text-align: center;
            color: #376157;
          }
        
        }
    }

  .box2{
     margin: .5rem;
      background:white;

      display: flex;
      align-items: center;
     
      flex-wrap: wrap;
      >div{
          width: 40%;
          text-align: center;
          border:1px solid #eeeeee;
          margin: 1rem;
          padding: .8rem 0;
          color: #6f6f6f;
          
      }
      .on{
          border: 1px solid red;
          color: red;
          border-radius: .3rem;
      }
  } 
  .box3{
      color: red;
      margin: 2rem;
  }
  .buts{
      display: flex;
      position: fixed;
      bottom: 1rem;
      width: 100%;
      justify-content: center;
      >button{
          width: 90%;
          background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
          color: white;
      }
  }
</style>
 